<template>
  <div class="content-wrapper">
    <div class="content" ref="scroll">
      <slot></slot>
    </div>
  </div>
</template>

<script>
  import BScroll from 'better-scroll'

  export default {
    data(){
      return {
        scroll: null
      }
    },
    methods: {
      _initScroll(){
        this.scroll = new BScroll(this.$refs.scroll, {
          click: true
        })
      },
      refresh(){
        this.scroll && this.scroll.refresh()
      }
    },
    mounted(){
      setTimeout(() => {
        this._initScroll()
      }, 20)
      this.scroll.on('scrollEnd', () => {
        console.log('scrollEnd')
      })
    }
  }
</script>

<style lang="less" scoped>
  @import '~@/styles/variables.less';

  .content-wrapper{
    position: absolute;
    z-index: 1;
    top: @height-header-bar;
    bottom: 0;
    width: 100%;
    .content{
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
  }
</style>

